<template>
  <h1>El-单选组件</h1>
  <el-radio-group v-model="gender">
    <el-radio value="男">男</el-radio>
    <el-radio value="女">女</el-radio>
  </el-radio-group>
  <el-radio-group v-model="edu">
    <el-radio label="学历:小学" value="小学"></el-radio>
    <el-radio label="学历:初中" value="初中"></el-radio>
    <el-radio label="学历:高中" value="高中"></el-radio>
    <el-radio label="学历:专科" value="专科"></el-radio>
    <el-radio label="学历:本科" value="本科"></el-radio>
    <el-radio label="学历:硕士研究生" value="硕士"></el-radio>
    <el-radio label="学历:博士研究生" value="博士"></el-radio>
  </el-radio-group>
  <h4>您选择的学历是{{edu}}</h4>
  <el-radio-group v-model="heros">
    <el-radio-button v-for="item in arr" :label="item.nickname" :value="item.name"></el-radio-button>
  </el-radio-group>
  <h4>您选择出战的武将是{{heros}}</h4>
</template>

<script setup>
  import {ref} from "vue";

  const gender = ref('');
  const edu = ref('本科');
  const arr = ref([
    { nickname: '及时雨', name: '宋江' },
    { nickname: '玉麒麟', name: '卢俊义' },
    { nickname: '智多星', name: '吴用' },
    { nickname: '豹子头', name: '林冲' },
    { nickname: '入云龙', name: '公孙胜' },
    { nickname: '大刀', name: '关胜' },
    { nickname: '霹雳火', name: '秦明' },
    { nickname: '双鞭', name: '呼延灼' },
    { nickname: '小李广', name: '花荣' },
    { nickname: '没羽箭', name: '张清' },
    { nickname: '美髯公', name: '朱仝' },
    { nickname: '花和尚', name: '鲁智深' },
    { nickname: '行者', name: '武松' },
    { nickname: '黑旋风', name: '李逵' },
  ]);
  const heros = ref('花荣');
</script>

<style scoped>

</style>